﻿<html ng-app="ionicApp">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>PQ客服</title>
		<link rel="stylesheet" type="text/css" href="css/ionic.min.css"/>
		<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			angular.module('ionicApp', ['ionic'])
				.controller('AppCtrl', ['$scope', '$ionicPopover', '$timeout', function($scope, $ionicPopover, $timeout) {

					$scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
						scope: $scope
					});

					// .fromTemplateUrl() 方法
					$ionicPopover.fromTemplateUrl('my-popover.html', {
						scope: $scope
					}).then(function(popover) {
						$scope.popover = popover;
					});
					$scope.openPopover = function($event) {
						$scope.popover.show($event);
					};
					$scope.closePopover = function() {
						$scope.popover.hide();
					};
					// 清除浮动框
					$scope.$on('$destroy', function() {
						$scope.popover.remove();
					});
					// 在隐藏浮动框后执行
					$scope.$on('popover.hidden', function() {
						// 执行代码
					});
					// 移除浮动框后执行
					$scope.$on('popover.removed', function() {
						// 执行代码
					});

				}])
		</script>
	</head>

	<body ng-controller="AppCtrl">
		<script id="my-popover.html" type="text/ng-template">
			<ion-popover-view>
				<ion-header-bar>
					<h1 class="title">我的浮动框标题</h1>
				</ion-header-bar>
				<ion-content>
					Hello!
				</ion-content>
			</ion-popover-view>
		</script>
	</body>

</html>